<template>
    <div id="ServiceDetail">
        <div id="header">
            <el-button @click="back">返回</el-button>
        </div>

        <!-- 头部 -->
        <div class="title">
            <span>项目详情</span>
        </div>

        <!-- 项目详情内容 -->
        <div id="serviceContent">
            <div class="contentItem clear">
                <p>项目名称</p>
                <!-- <p>精油推背</p> -->
                <p>{{serviceDetail.name}}</p>
            </div>

            <div class="contentItem clear">
                <p>项目时长</p>
                <!-- <p>80分钟</p> -->
                <p>{{serviceDetail.time}}</p>
            </div>

            <div class="contentItem clear">
                <p>项目价格</p>
                <!-- <p>109.0</p> -->
                <p>{{serviceDetail.price}}</p>
            </div>

            <div class="contentItem clear">
                <p>项目简介</p>
                <!-- <p>推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成被按摩者软组织损伤、关节脱位、骨折。推背的好处有：舒经活络，畅通血脉，促进血液循环，活络筋骨等。坏处有：非专业人员在按摩时动作粗暴、手法不当很容易造成</p> -->
                <p>{{serviceDetail.describe}}</p>
            </div>

            <div class="contentItem clear">
                <div id="imgTitle">项目图片</div>
                <div id="serviceDetailImg">
                    <div class="detailImgMain">
                        <el-image
                            :src="addressHttp+'/'+serviceDetail.picture"
                            :preview-src-list="srcList"
                        ></el-image>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [], // 父辈向子辈传参
    name: "ServiceDetail",
    components: {
        // 组件的引用
    },
    data() {
        return {
            serviceDetail: {} /* 存放项目详情渲染的数据 */,
            addressHttp: "http://172.16.113.23:8080" /* 图片服务器地址*/,
            srcList: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
                "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
            ],  /* 预览图片的列表 */
            serviceId:'',
        };
    },
    methods: {
        // 点击返回
        back() {
            this.$router.back();
        },

        // 渲染项目详情
        getServiceDetail(){
            this.$axios({
                url:this.addressHttp + '/project/selectdetailProject',
                method: "get",
                params:{
                    id:this.serviceId
                }                            
            })
                .then((res) => {
                    console.log(res);
                    if (res.code === 200) {
                        this.serviceDetail = {...res.data};
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    },
    computed: {},
    watch: {},
    created() {
        this.serviceId = this.$route.params.id
        console.log("项目id",this.serviceId);
        this.getServiceDetail()
    },
    mounted() {

    },
};
</script>
    
<style scoped lang='less'>
#ServiceDetail {
    // 头部返回
    #header {
        margin-bottom: 20px;
        .el-button {
            width: 80px;
            height: 30px;
            font-size: 13px;
            text-align: center;
            line-height: 30px;
            line-height: 6px;
            color: #333;
        }
    }

    // 头部样式
    .title {
        width: 70px;
        height: 20px;
        padding-left: 10px;
        border-left: 4px solid #0082cc;
        font-size: 14px !important;
        font-weight: bold;
    }

    // 详情内容
    #serviceContent {
        font-size: 14px;
        margin-top: 35px;
        .contentItem {
            p {
                float: left;
                line-height: 30px;
            }

            p:nth-of-type(1) {
                margin-right: 50px;
            }

            p:nth-of-type(2) {
                width: 90%;
            }

            // 图片部分
            #imgTitle {
                float: left;
                margin-right: 50px;
            }

            #serviceDetailImg {
                float: left;
                width: 90%;
                .detailImgMain {
                    display: block;
                    margin-bottom: 10px;
                    font-size: 0;
                    .el-image {
                        width: 90px;
                        height: 90px;
                    }
                }
                .detailImgOther {
                    .el-image {
                        width: 90px;
                        height: 90px;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}
</style>  






 


